<style scoped lang="scss">
.waterfall-container {
  justify-content: center;
}
</style>

<template>
  <el-row :gutter="0" class="waterfall-container">
    <el-col :span="20">
      <div v-if="data.length">
        <water-fall
          gap="10px"
          width="250px"
          class="container"
          :data="data"
          :delay="true"
        >
          <template #default="item">
            <div class="card">
              <el-image :src="item.url"></el-image>
              <p>{{ item.src }}</p>
            </div>
          </template>
        </water-fall>
      </div>
    </el-col>
  </el-row>
</template>

<script setup>
// 引入waterfall插件
import WaterFall from 'kuan-vue-waterfall';
import request from '../../../utils/axios';

import { ref, onMounted } from 'vue';

const data = ref([]);

const data2 = ref({});

onMounted(async () => {
  await request({
    url: 'http://website.bluej.cn/api/carouselGroup/get',
    method: 'GET',
    params: {
      carouselGroupId: 1359,
    },
  }).then((res) => {
    data.value = res.data.Carousels;
  });
});
</script>
